<template>
	<!-- template下只能有一个根节点（div） -->
	<div>
		<button @click="comNameChange('LRC')">LRC</button>
		<button @click="comNameChange('ASD')">ASD</button>
		<button @click="comNameChange('AXR')">AXR</button>
		<!-- keep-alive的参数：-->
		<!-- include和exclude互斥不可同时使用，这两个属性都不使用的时候，默认所有组件都被缓存 -->
		<!-- include属性：被列入的组件会被缓存，值之间以逗号分割 -->
		<!-- exclude属性：被列入的组件不会被缓存，值之间以逗号分割 -->
		<!-- 在include和exclude属性中，如果组件内部提供了name值时，以组件提供的name为准 -->
		<keep-alive include="lrc,ASD,AXR">
			<!-- 专门用来实现动态组件的渲染 -->
			<component :is="comName"></component>
		</keep-alive>
	</div>
</template>

<script>
	import LRC from '@/components/LRC'
	import ASD from '@/components/ASD'
	import AXR from '@/components/AXR'
	export default{
		data() {
			return{
				comName:'AXR'
			}
		},
		methods:{
			comNameChange(val){
				this.comName=val
			}
		},
		//注册私有子组件
		components:{
			//两种写法
			LRC,
			ASD,
			AXR
		}
	}
</script>

<style>
	
</style>